<template>
	<view style="position: relative;">
		<image src="../../static/login/bg_top.png" class="customBg"></image>
		<view class="logo_area">
			南通市经开区重大项目全生命周期管理平台
		</view>
		<view class="content_area">
			<view class="forms">
				<u-form :model="model" ref="uForm" :rules="rules">
					<u-form-item prop="username">
						<view class="input_item">
							<input class="uni-input" v-model="model.username" @clear="model.username=''"
								placeholder="请输入账号" />
							<image src="../../static/login/icon_phone.png" class="before form_icon"></image>
							<image src="../../static/login/icon_close.png" class="after form_icon"
								@click="model.username=''"></image>
						</view>
					</u-form-item>
					<u-form-item prop="password">
						<view class="input_item">
							<input class="uni-input" minlength='5' maxlength="20" :password="seePassword"
								v-model="model.password" @clear="model.password=''" placeholder="密码为8-18字母数字混合" />
							<image src="../../static/login/icon_password.png" class="before form_icon"></image>
							<image src="../../static/login/icon_hidden.png" v-if="seePassword" class="after form_icon"
								@click="dealPassword()"></image>
							<image src="../../static/login/icon_see.png" v-else class="after form_icon"
								@click="dealPassword()"></image>
						</view>
					</u-form-item>
					<u-form-item prop="confirmPassword">
						<view class="input_item">
							<input class="uni-input" maxlength="20" :password="seeRePassword"
								v-model="model.confirmPassword" @clear="model.confirmPassword=''"
								placeholder="请再次输入密码" />
							<image src="../../static/login/icon_password.png" class="before form_icon"></image>
							<image src="../../static/login/icon_hidden.png" v-if="seeRePassword" class="after form_icon"
								@click="dealRePassword()"></image>
							<image src="../../static/login/icon_see.png" v-else class="after form_icon"
								@click="dealRePassword()"></image>
						</view>
					</u-form-item>
					<!-- <u-form-item prop="code">
						<u-input v-model="model.code" clearable border="surround" shape="circle" placeholder="请输入验证码">
							<template slot="prefix">
								<image src="../../static/login/icon_calu.png" class="form_icon"></image>
							</template>
							<template slot="suffix">
								<image @click="getCode()" class="captcha" :src="'data:image/jpg;base64,' + captcha">
								</image>
							</template>
						</u-input>
					</u-form-item> -->
				</u-form>
			</view>
			<!-- <view class="agree_area start_layout">
				<image class="flag_img" @click="selected()" v-if="checked" src="../../static/mine/fill_dot.png"></image>
				<image class="flag_img" @click="selected()" v-else src="../../static/mine/fill.png"></image>
				<view class="agree_block">我已阅读并同意《<text class="agree_text"
						@click="toAggressive(1)">用户服务协议</text>》和《<text class="agree_text"
						@click="toAggressive(2)">隐私政策</text>》
				</view>
			</view> -->
			<button class="btn_area" :loading="loading" @click="register()">注册</button>
			<view class="bottom_area customBuleFontStyle" @click="toLogin()">
				已有账户，立即登录
			</view>
		</view>
	</view>
</template>

<script>
	import {
		register,
		getPublicKey
	} from '@/utils/api.js'
	import {
		encrypt,
		decrypt
	} from '@/utils/jsencrypt.js'
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.model.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				loading: false,
				model: {
					code: "",
					confirmPassword: "",
					password: "",
					username: "",
					uuid: "",
					userType: "sys_user",
					grantType: "password",
					clientId: "e5cd7e4891bf95d1d19206ce24a7b32e"
				},
				checked: false,
				seePassword: true,
				seeRePassword: true,
				tips: '发送验证码',
				captcha: "",
				rules: {
					// username: [{
					// 		required: true,
					// 		message: '请输入手机号',
					// 		trigger: ['change', 'blur'],
					// 	},
					// 	{
					// 		validator: (rule, value, callback) => {
					// 			// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
					// 			return this.$u.test.mobile(value);
					// 		},
					// 		message: '手机号码不正确',
					// 		// 触发器可以同时用blur和change，二者之间用英文逗号隔开
					// 		trigger: ['change', 'blur'],
					// 	}
					// ],
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: ['change', 'blur'],
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '请输入正确的手机号码',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[_~!@#$%^&*.])[\da-zA-Z~!@_#$%^&*.]{8,18}$/,
							message: "密码必须是8-18位、且包含字母、数字、特殊符号",
							trigger: ["change", "blur"],
						}
					],
					confirmPassword: [{
						validator: validatePass,
						trigger: 'blur',
						required: true
					}],
					// code: [{
					// 	required: true,
					// 	message: '请输入验证码',
					// 	trigger: ['change', 'blur'],
					// }]
				},
			};
		},
		onLoad() {
			uni.setStorageSync("access_token", '')
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			init() {
				//获取验证码
				getCaptcha().then(s => {
					if (s.code === 0) {
						this.captcha = s.obj.img.replace(/[\r\n]/g, "");
						this.model.uuid = s.obj.uuid
					} else {
						uni.showToast({
							title: s.obj,
							icon: 'none'
						})
					}
				});
			},
			getCode() {
				this.init()
			},
			//点击注册
			register() {
				this.$refs.uForm.validate().then(res => {
					// if (this.checked) {

					// } else {
					// 	uni.showToast({
					// 		title: '请先勾选同意用户协议',
					// 		icon: 'none'
					// 	})
					// }
					this.loading = true
					//获取publicKey
					getPublicKey().then(response => {
						if (response.code === 200) {
							this.model.keyId = response.data.keyId
							this.model.password = encrypt(this.model.password, response.data.publicKey)
							register(this.model).then(s => {
								if (s.code === 200) {
									uni.showToast({
										title: "注册成功，请登录",
										icon: 'none'
									})
									this.loading = false
									setTimeout(() => {
										uni.navigateTo({
											url: './login'
										})
									}, 1000)
								} else {
									this.loading = false
									uni.showToast({
										title: s.msg,
										icon: 'none'
									})
								}
							});
						} else {
							uni.showToast({
								title: response.msg,
								icon: 'none'
							})
						}
					});
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			selected() {
				this.checked = !this.checked
			},
			//跳转登录
			toLogin() {
				uni.navigateTo({
					url: './login',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			dealPassword() {
				this.seePassword = !this.seePassword
			},
			dealRePassword() {
				this.seeRePassword = !this.seeRePassword
			},
			toAggressive(type) {
				uni.navigateTo({
					url: './aggressive?type=' + type,
					animationType: 'pop-in',
					animationDuration: 200
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.customBg {
		width: 100%;
		height: 420rpx;
	}

	.logo_area {
		position: absolute;
		top: 100rpx;
		left: 10%;
		color: #3389FF;
		font-size: 50rpx;
	}

	.content_area {
		position: absolute;
		top: 300rpx;
		left: 0rpx;
		width: 100%;
		padding: 30rpx 40rpx;

		.forms {
			margin: 20rpx 0;

			.captcha {
				width: 200rpx;
				height: 80rpx;
				margin-right: 20rpx;
			}

			.close_icon {
				width: 36rpx;
				height: 36rpx;
				padding: 18rpx 20rpx;
			}

			.form_icon {
				width: 44rpx;
				height: 80rpx;
				margin: 0 16rpx;
				padding: 18rpx 0;
			}


		}

		.u-form-item ::v-deep .u-input {
			background-color: #F4F7FC;
			height: 100rpx;
			border: 0;
		}

		.u-form-item::after {
			border: none;
		}

		.agree_area {
			margin-bottom: 40rpx;

			.flag_img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}

			.agree_block {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #8B94A1;

				.agree_text {
					color: #2276E3
				}
			}

		}

		.btn_area {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			// padding: 25rpx 0;
			width: 100%;
			background: rgba(34, 118, 227, 1);
			border-radius: 50rpx;
			// text-align: center;
		}

		.bottom_area {
			text-align: center;
			padding: 40rpx 0;
		}
	}

	checkbox .wx-checkbox-input {
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
	}

	.input_item {
		background-color: #F4F7FC;
		padding: 30rpx 100rpx;
		width: 100%;
		border-radius: 50rpx;
		position: relative;

		.before {
			position: absolute;
			top: 50%;
			left: 20rpx;
			transform: translateY(-50%);
			z-index: 6;
		}

		.after {
			position: absolute;
			top: 50%;
			right: 20rpx;
			transform: translateY(-50%);
			z-index: 6;
		}
	}
</style>